<template>
  <div>
    <!-- 头部 --state-->
    <div class="nav">
      <p>
        <span>.</span>
        新增客户
      </p>
      <div id="nav_go4">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->

    <div class="customerxq_box1">
      <p>基本信息</p>
      <ul>
        <li>
          <span>企业编号</span>
          <el-input style="width:55%" v-model="componyno"></el-input>
        </li>
        <li>
          <span>企业名称</span>
          <el-input style="width:55%" v-model="componyname"></el-input>
        </li>
        <li>
          <span>企业地址</span>
          <el-input style="width:55%" v-model="address"></el-input>
        </li>
        <li>
          <span>合作年限</span>
          <el-input style="width:55%" v-model="collaboratetime"></el-input>
        </li>
        <li>
          <span>合作状态</span>
          <el-input style="width:55%" v-model="state"></el-input>
        </li>
        <li>
          <span>信用额度</span>
          <el-input style="width:55%" v-model="creditlines"></el-input>
        </li>
        <li>
          <span>到期欠款(元)</span>
          <el-input style="width:55%" v-model="expriedebt"></el-input>
        </li>
        <li>
          <span>未到期欠款(元)</span>
          <el-input style="width:55%" v-model="unexpriedebt"></el-input>
        </li>
        <li>
          <span>欠款总额(元)</span>
          <el-input style="width:55%" v-model="totalpriedebt"></el-input>
        </li>
        <li>
          <span>联系人</span>
          <el-input style="width:55%" v-model="linkman"></el-input>
        </li>
        <li>
          <span>联系方式</span>
          <el-input style="width:55%" v-model="linkphone"></el-input>
        </li>
        <li>
          <span>职务</span>
          <el-input style="width:55%" v-model="duty"></el-input>
        </li>
      </ul>
    </div>
    <div class="customerxq_box2">
      <div class="box2_left">
        <div class="box2_left_top">
          <p>开票信息</p>
          <ul>
            <li>
              <span>单位名称</span>
              <el-input style="width:70%" v-model="compname"></el-input>
            </li>
            <li>
              <span>联系人</span>
              <el-input style="width:70%" v-model="people"></el-input>
            </li>
            <li>
              <span>单位地址</span>
              <el-input style="width:70%" v-model="compaddress"></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width:70%" v-model="phone"></el-input>
            </li>
            <li>
              <span>开户行</span>
              <el-input style="width:70%" v-model="openbank"></el-input>
            </li>
            <li>
              <span>开户账号</span>
              <el-input style="width:70%" v-model="openaccount"></el-input>
            </li>
            <li class="li">
              <span>纳税人识别号</span>
              <el-input style="width:80%" v-model="taxpyer"></el-input>
            </li>
          </ul>
        </div>
        <div class="box2_left_bottom">
          <p>
            其他信息
            <span>
              <el-button type="primary" size="mini" @click="addqita()">新增</el-button>
            </span>
          </p>
          <ul>
            <li v-for="(item,index) in qitavalue" :key="index">
              <el-input style="width:30%" v-model="item.type" placeholder="信息类型"></el-input>
              <el-input style="width:55%" v-model="item.content" placeholder="信息内容"></el-input>
              <el-button size="mini" type="info" icon="el-icon-delete" @click="delqita(index)"></el-button>
            </li>
          </ul>
        </div>
      </div>
      <div class="box2_right">
        <p>合作记录</p>
        <template>
          <el-table :data="tableData" style="width: 100%" height="420px" stripe>
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column label="成交时间" align="center" width="160">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.createon" type="date" style="width:100%"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="采购单编号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.purnum"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="原料名称" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.matname"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.amount"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单价(元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="小计(元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.total" @focus="addlist()"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="add()">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [{}],
      state1: "",
      state2: "",
      active: 1,
      qitavalue: [{}],
      componyno: "",
      componyname: "",
      address: "",
      collaboratetime: "",
      state: "",
      creditlines: "",
      expriedebt: "",
      unexpriedebt: "",
      totalpriedebt: "",
      linkman: "",
      linkphone: "",
      duty: "",

      compname: "",
      compaddress: "",
      people: "",
      phone: "",
      openbank: "",
      openaccount: "",
      taxpyer: ""
    };
  },
  methods: {
    //新增客户
    add() {
      let a = {
        compname: this.compname,
        compaddress: this.compaddress,
        people: this.people,
        phone: this.phone,
        openbank: this.openbank,
        openaccount: this.openaccount,
        taxpyer: this.taxpyer
      };
      var avalue=[]
      avalue.push(a)
      var b = [];
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].total !== undefined) {
          b.push(this.tableData[i]);
          b[i].createon =
            b[i].createon.getFullYear() +
            "-" +
            (b[i].createon.getMonth() + 1) +
            "-" +
            b[i].createon.getDate() +
            " ";
        }
      }
      var c = [];
      for (var i = 0; i < this.qitavalue.length; i++) {
        if (this.qitavalue[i].type !== undefined) {
          c.push(this.qitavalue[i]);
        }
      }

      let arr = {
        componyno: this.componyno,
        componyname: this.componyname,
        address: this.address,
        collaboratetime: this.collaboratetime,
        state: this.state,
        creditlines: this.creditlines,
        expriedebt: this.expriedebt,
        unexpriedebt: this.unexpriedebt,
        totalpriedebt: this.totalpriedebt,
        linkman: this.linkman,
        linkphone: this.linkphone,
        duty: this.duty,
        lstkp: avalue,
        lstcr: b,
        lsom: c
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/Customermanlst?index=3&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = data1.string.__text;
        console.log(data3);
        if (data3 == "新增成功") {
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.$router.go(-1);
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
    //新增合作记录
    addlist() {
      let arr = {};
      this.tableData.push(arr);
    },
    //新增其他
    addqita() {
      let arr = {};
      this.qitavalue.push(arr);
    },
    //删除其他
    delqita(index) {
      this.qitavalue.splice(this.qitavalue.indexOf(index), 1);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go4 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.customerxq_box1 {
  background: $white;
  height: 220px;
  width: 98%;
  padding: 0 1%;
  font-size: 14px;
  p {
    font-weight: bold;
    height: 40px;
    padding-top: 10px;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 20%;
      margin-top: 10px;
      text-align: right;
    }
  }
}
.customerxq_box2 {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: $fontcolor;
  p {
    font-weight: bold;
    height: 40px;
    padding-top: 10px;
    padding-left: 1%;
  }
  .box2_left {
    width: 40%;
    .box2_left_top {
      background: $white;
      height: 260px;
      padding-left: 1%;
      //   border: solid 1px red;
      ul {
        width: 98%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 1%;
        li {
          width: 50%;
          margin-top: 10px;
          text-align: right;
        }
        .li {
          width: 100%;
        }
      }
    }
    .box2_left_bottom {
      background: $white;
      margin-top: 10px;
      padding-left: 1%;
      height: 200px;

      p {
        overflow: hidden;
        padding-right: 1%;
        span {
          float: right;
        }
      }
      ul {
        width: 98%;
        padding: 0 1%;
        height: 150px;
        overflow: auto;

        li {
          margin-top: 10px;
        }
      }
    }
  }
  .box2_right {
    width: 58%;
    padding-left: 1%;
    background: $white;
  }
}
.bottom {
  padding-top: 10px;
  text-align: center;
}
</style>